<template>
    <view>
        <!-- 引入过滤器 -->
        <!-- <wxs  module="filter"  src="/miniprogram/miniprogram_npm/@vant/weapp/wxs/filter.wxs"/> -->
        <view>
            <!-- 卡券 -->
            <view v-if="cardList.length" class="card_list_wrap">
                <view class="card_list" v-for="(item, index) in cardList" :key="index">
                    <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/tags.png" class="card_tags" v-if="item.couponStatus == 'JiJiangGuoQi'"></image>

                    <image :src="(mixDiscountIconList[1] && mixDiscountIconList[1].icon) || 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/line_bg.png'" class="card_list_bg" v-if="item.useType == 'ZhiDing'"></image>

                    <image :src="(mixDiscountIconList[0] && mixDiscountIconList[0].icon) || 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/general_notes.png'" class="card_list_bg" v-if="item.useType == 'QuanChang'"></image>

                    <view class="endDate" v-if="item.isEndDate">快过期</view>
                    <view class="card_left">
                        <view>
                            <view class="crad_left_money">
                                <text class="money_type">￥</text>
                                <text class="money_amonut">{{ item.couponBalance }}</text>
                            </view>
                            <view class="voucher_type2">{{item.couponTypeStr}}</view>
                            <view class="voucher_type" v-if="item.useType == 'ZhiDing'">指定站点</view>
                            <view class="voucher_type" v-else-if="item.useType == 'QuanChang'">全场通用</view>
                        </view>
                    </view>

                    <view class="card_right">
                        <view class="coupon_stations">
                            <view class="coupon_type">{{ item.activityName }}</view>
                            <view class="stations" @tap="naviStations" v-if="item.availableSiteName" :data-stations="item.availableSiteName">
                                <view>适用站点</view>
                                <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/turn.png" alt="" class="turn" />
                            </view>
                        </view>
                        <view class="full_reduction">满{{ item.limitBalance }}可用</view>
                        <view class="validity_date"><image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/icon1.png"></image>{{ item.startDate }}</view>
                        <view class="validity_date"><image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/icon2.png"></image>{{ item.endDate }}</view>
                    </view>
                </view>
            </view>
            <Upgrading text="暂无内容" v-if="cardList.length<=0&&loading"></Upgrading>
            <!-- 历史卡券,卡券中心 -->
            <view class="ticket_center">
                <view class="ticket_center_type" @tap="naviHistoryCard">历史卡券</view>
								<template v-if="prepaidCardSwitch">
									<view class="ticket_center_vertical"></view>
									<view class="ticket_center_type" @tap="navCardConvert">券码中心</view>
								</template>
            </view>
        </view>
        <!-- 站点弹窗 -->
        <u-popup @close="onClose" mode="center" :show="stationsVisible" custom-style="border-radius: 20rpx;overflow:hidden;">
            <view class="announcement">
                <view class="announcement-content">
                    <view class="announcement-title">适用站点</view>
                    <view class="announcement-body">{{ stations }}</view>
                </view>
                <view class="announcement-close" @tap="stationsConfirm">我知道了</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
	'use strict';
	import Upgrading from '../../../components/upgrading/upgrading';

	// exports.__esModule = true; // mine/pages/cardVoucher/cardVoucher.ts

	var https_1 = require('./../../../api/https.js');
	export default {
		components: {
			Upgrading,
		},
		data() {
			return {
				cardList: [{}],
				stationsVisible: false,
				stations: '',
				page: 1,
				pageNum: 0,
				loading: false,
			};
		},
		onLoad: function () {
			this.CouponPage(1);
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function () {
			var page = this.page + 1; //获取当前页数并+1

			if (this.page < this.pageNum) {
				this.page=page
				this.CouponPage(2);
			}
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function () {
			this.page = 1;

			if (this.cardList.length) {
				uni.showNavigationBarLoading(); //在标题栏中显示加载图标

				this.CouponPage(1);
			}
		},
		methods: {
			naviHistoryCard: function () {
				uni.navigateTo({
					url: '../historyCardVoucher/historyCardVoucher'
				});
			},

			// 券码中心
			navCardConvert() {
				uni.navigateTo({
					url: '/mine/pages/cardConvert/cardConvert'
				});
			},

			CouponPage: function (index) {
				var that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.loading=false
				https_1
					.getMyCouponPage({
						tab: 1,
						current: that.page,
						size: 10
					})
					.then(function (res) {
						if (res.code == 0) {
							var total = res.data.total;
							var pageNum = Math.ceil(total / 10);
							var cardList = void 0;

							switch (index) {
								// 下拉刷新
								case 1:
									cardList = res.data.records;
									uni.hideNavigationBarLoading(); //在标题栏中隐藏加载图标

									uni.stopPullDownRefresh();
									break;
								// 上拉加载或初始化页面

								case 2:
									cardList = that.cardList.concat(res.data.records);
									break;
							}
							cardList = cardList.map(item =>{
              	let curTime = new Date().getTime()
              	let endTime = new Date(item.endDate).getTime()
                item.isEndDate = endTime - curTime < 259200000
                return item
              })
							that.cardList = cardList
							that.pageNum = pageNum
							uni.hideLoading();
							that.loading = true
						} else if (res.code == 4) {
							var cardList = [];
							that.cardList=cardList
							that.loading = true
							uni.hideLoading();
						}
					});
			},

			naviStations: function (e) {
				var stations = e.currentTarget.dataset.stations;

				if (stations) {
					this.stationsVisible=true,
						this.stations=stations
				}
			},

			stationsConfirm: function () {
				this.stationsVisible=false
			},

			onClose() {
				console.log('占位：函数 onClose 未声明');
			}
		}
	};
</script>
<style lang="less">
    @import './cardVoucher.less';
</style>
